<template>
  <div>
    <el-badge class="badge" is-dot :hidden="!hasReadCount">
      <svg-icon class-name="message-icon" icon-class="message" @click="handleClick"></svg-icon>
    </el-badge>

    <!-- 消息列表弹窗 -->
    <el-dialog title="站内信列表" :visible.sync="open" width="1000px" append-to-body>
      <el-table :data="messageList" border @row-click="handleRowClick">
        <el-table-column label="消息类型" align="center" prop="messageType">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_message_type" :value="scope.row.messageType"/>
          </template>
        </el-table-column>
        <el-table-column label="消息级别" align="center" prop="messageLevel">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_message_level" :value="scope.row.messageLevel"/>
          </template>
        </el-table-column>
        <el-table-column label="标题" align="center" prop="messageTitle" :show-overflow-tooltip="true"/>
        <el-table-column label="发送人" align="center" prop="senderNick" />
        <el-table-column label="发送时间" align="center" prop="createTime" width="180" />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_message_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog title="站内信详情" :visible.sync="detailOpen" width="60%" append-to-body>
      <el-form ref="message" :model="message" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="标题">
              <el-input v-model="message.messageTitle" readonly/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="内容">
              <editor v-model="message.messageContent" :min-height="250" :readOnly="true"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { listMessageByUser, getMessage, getDot } from "@/api/system/message";
export default {
  name: 'Message',
  dicts: ['sys_message_type', 'sys_message_status','sys_message_level'],
  data() {
    return {
      // 红点显示
      hasReadCount: false,
      // 列表弹窗开关
      open: false,
      // 消息列表
      messageList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 详情弹窗开关
      detailOpen: false,
      // 消息详情
      message: {}
    }
  },
  created() {
    this.getList();
    this.getDot();
  },
  methods: {
    // 顶部图标点击
    handleClick() {
      this.open = true;
      this.getList();
    },
    // 获取列表
    getList() {
      listMessageByUser(this.queryParams).then(response => {
        this.messageList = response.rows;
        this.total = response.total;
      })
    },
    // 获取未读消息条数
    getDot() {
      getDot().then(response => {
        this.hasReadCount = response.data > 0;
      })
    },
    // 点击行
    handleRowClick(row, column, event) {
      this.message = {};
      const messageId = row.messageId
      getMessage(messageId).then(response => {
        this.message = response.data;
        this.detailOpen = true;
        this.getList()
        this.getDot()
      })
    },
  },
}

</script>

<style lang="scss" scoped>
::v-deep .el-badge__content.is-fixed.is-dot {
  top: 16px;
  height: 9px;
  width: 9px;
}
</style>
